<template>
  <div class="personnel-list" v-if="personList.length > 0">
    <template v-for="(person, index) in personList" :key="person.id">
      <div
        @click="personClick(person)"
        v-if="
          !(person.listenUserId === person.speakUserId) &&
          (person.groupInfo || person.listenUser)
        "
        :class="[
          'item',
          (person.groupId && person.groupId == selected) ||
          (!person.groupId && person.listenUserId == selected)
            ? 'selected'
            : ''
        ]"
      >
        <!-- 如果不存在群id且听者id等于当前用户id -->
        <template v-if="!person.groupId && person.listenUserId === currUserId">
          <PersonnelIcon
            :backgroundColor="isColor(index)"
            :name="person.speakUser?.name"
            :headPortraits="person.speakUser?.headPortrait"
          />
          <div class="person-right">
            <div class="person-right-name">
              {{ person.speakUser?.name || '---' }}
            </div>
            <div class="person-right-msg">
              <template v-if="person.type === 1">
                {{ person.content }}
              </template>
              <template v-else-if="person.type === 5"> [图片] </template>
              <template v-else-if="person.type === 4"> [文件] </template>
            </div>
          </div>
          <div class="msg-tip">
            <div class="msg-tip-top">
              {{ dayjs(person.createdAt).format('MM-DD') }}
            </div>
            <div class="msg-tip-bottom">
              <a-badge v-if="person.unreadNum > 0" :count="person.unreadNum" />
            </div>
          </div>
        </template>
        <!-- 如果不存在群id且读者id等于当前用户id -->
        <template
          v-if="
            !person.groupId &&
            person.speakUserId === currUserId &&
            person.speakUserId !== person.listenUserId
          "
        >
          <PersonnelIcon
            :backgroundColor="isColor(index)"
            :name="person.listenUser?.name"
            :headPortraits="person.listenUser?.headPortrait"
          />
          <div class="person-right">
            <div class="person-right-name" v-if="person.listenUser">
              {{ person.listenUser?.name || '---' }}
              <!-- {{ person.userId }} -->
            </div>
            <div class="person-right-msg">
              <template v-if="person.type === 1">
                {{ person.content }}
              </template>
              <template v-else-if="person.type === 5"> [图片] </template>
              <template v-else-if="person.type === 4"> [文件] </template>
            </div>
          </div>
          <div class="msg-tip">
            <div class="msg-tip-top">
              {{ dayjs(person.createdAt).format('MM-DD') }}
            </div>
            <div class="msg-tip-bottom">
              <a-badge v-if="person.unreadNum > 0" :count="person.unreadNum" />
            </div>
          </div>
        </template>
        <!-- 群聊 -->
        <template v-if="person.groupId">
          <PersonnelIcon
            :backgroundColor="isColor(index)"
            :name="person.groupInfo?.name"
            :headPortraits="person.groupInfo.headPortrait"
            :number="person.groupNoticeNum"
          />
          <div class="person-right">
            <div class="person-right-name">
              {{ person.groupInfo?.name || '---' }}
            </div>
            <div class="person-right-msg">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                <span v-if="person.unreadNum > 0">{{ person.unreadNum }}</span>
                <span v-if="person.speakUserId !== currUserId">
                  {{
                    person.speakUser?.nickname
                      ? person.speakUser?.nickname
                      : person.speakUser?.name
                  }}：
                </span>
                <span>
                  <template v-if="person.type === 1">
                    {{ person.content }}
                  </template>
                  <template v-else-if="person.type === 5"> [图片] </template>
                  <template v-else-if="person.type === 4">
                    [文件]
                  </template></span
                >
              </div>
            </div>
          </div>
          <div class="msg-tip">
            <div class="msg-tip-top">
              {{ dayjs(person.createdAt).format('MM-DD') }}
            </div>
            <div class="msg-tip-bottom">
              <a-badge v-if="person.unreadNum > 0" :count="person.unreadNum" />
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import PersonnelIcon from './PersonnelIcon.vue';
import dayjs from 'dayjs';
const currUserId = Number(localStorage.getItem('userId'));
const props = withDefaults(
  defineProps<{
    personList?: any[];
    selected?: number;
  }>(),
  {
    personList: () => [],
    selected: 0
  }
);
const color = ['#0089ff', '#cdf5b0', '#ffe2da'];
const isColor = (index: number) => {
  if (index <= color.length - 1) {
    return color[index];
  } else {
    return color[(index + 1) % color.length];
  }
};

const emit = defineEmits(['update:selected', 'itemClick']);

const personClick = (person: any) => {
  emit('itemClick', person, 1);
};
</script>
<style lang="less" scoped>
.personnel-list {
  // border-right: 1px solid #eee;
}
.item {
  height: 50px;
  padding: 10px;
  // margin: 10px 0;
  display: flex;

  &:hover {
    background: #f7f7f7;
    border-radius: 5px;
    cursor: pointer;
  }
  .person-right {
    flex: 1;
    padding: 0 8px;

    &-name {
      font-size: 18px;
      color: #333;
      margin-bottom: 10px;
      width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &-msg {
      font-size: 14px;
      color: #999;
      overflow: hidden;
      width: 150px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .msg-tip {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-top {
      color: #afafaf;
    }
  }
}
.selected {
  background: #eee;
  border-radius: 5px;
}
</style>
